<template>
<div class="info-bar">
    <div class="item"><span>@yangstar</span></div>
    <div class="item"><span>这只是一个开端</span></div>
    <div class="item">
        <span class="iconfont iconyinfu2"></span>
        <div class="music-name">
            <span data-text="yangstar的原声">yangstar的原声</span>
        </div>
    </div>
</div>
</template>

<script>
export default {
}
</script>
<style  scoped>
.info-bar{
    color: #ffffff;
    font-size: 16px;
    padding-left: 10px;
}
.info-bar .item{
    padding: 5px 0;
    display: flex;
}
.info-bar .item .iconyinfu2{
    font-size: 23px;
}
.info-bar .item .music-name{
    width: 200px;
    white-space:nowrap;
    overflow: hidden;
}
.info-bar .item .music-name span{
    display: inline-block;
    animation: scroll 5s linear infinite
}
.info-bar .item .music-name span::after{
    content: attr(data-text);
    margin-left:20px;
}
@keyframes scroll {
    from{transform: translateX(0)}
    to{transform: translateX(calc(-50% - 20px))}
}
</style>